import React from 'react';
import { observer, inject } from 'mobx-react';
import LayoutTr from '../layout/LayoutTr';
import * as Parse from '../../util/public/parseLayout';
import * as _ from '../../util/public/common';

@inject('globalStore')
@observer
export default class DTop extends React.Component{
    constructor(){
        super();
    }
    render(){
        const { symbol,detailLayout,globalStore } = this.props;
        const { commonParam } = globalStore;
        const { layouttype } = commonParam;
        const groupid = parseInt(symbol.substring(7)) - 1;
        let tableStyle = {};
        const { rowattrs,colattrs,rowheads,ec } = detailLayout;
        let colheads = {...detailLayout.colheads};
        const colHeads = Parse.convertColHeads(colheads, symbol, layouttype, tableStyle, false, true);
        const ecMap = Parse.convertEcMap(ec);
        const rowCusAttr = rowattrs ? rowattrs["row_0"] : null;
        //解析列宽
        let colTdArr = new Array();
        colHeads.map((o)=>{
            let colStyle = {width:o.width};
            const colCusAttr = colattrs && colattrs[`col_${o.id}`] || {};
            let colClassName = "";
            if(colCusAttr.hide === "y")
                colClassName += " detail_hide_col";
            if(!!colCusAttr.class)
                colClassName += " "+colCusAttr.class;
            colTdArr.push(<td style={colStyle} className={colClassName} />);
        });
        //解析数据行
        let arr = new Array();   //头部行
        arr.push(<tr className="detailControlWidth">{colTdArr}</tr>);
        arr.push(<LayoutTr ecId={`${this && this.props && this.props.ecId || ''}_LayoutTr@hputw8@${symbol}_lockedRow`}
            symbol={symbol}
            colNum={colHeads.length}
            rowid={0}
            rowHeight={`${rowheads[`row_0`]||30}px`}
            rowCusAttr={rowCusAttr}
            colattrs={colattrs}
            ecMap={ecMap}
            detailProps={{}}
        />);

        return (
            <div className="wf-detail-locked-btnrow">
                <div className="wf-detail-locked-btnrow-content">
                    <table className="wf-detail-locked-btnrow-table">
                        <tbody>
                            {arr}
                        </tbody>
                    </table>
                </div>
                <div className="wf-detail-locked-btnrow-placeholder"></div>
            </div>
        )
    }
}